<template>
  <div class="register-app">
    <div class="room" v-show="nextNum === 1">
      <p>输入</p>
      <input v-model="data.userName" placeholder="输入手机号" />
      <input v-model="data.password" placeholder="输入密码" />
      <input v-model="data.nickname" placeholder="输入昵称" />
      <input v-model="data.gender" placeholder="1男性，0女性" />
      <div class="next" @click="nextButton(2)">下一步</div>
    </div>

    <!--选择性别以及头像-->
    <div v-show="nextNum == 2">
      <p>选择头像</p>
      <div class="avatar">
        <img
          class="avatar-item"
          :src="item.img"
          v-for="(item, index) in avatarList"
          @click="getAvatarItem(item.img)"
          :key="index"
        />
      </div>
      <div class="next" @click="register">注册</div>
    </div>
    <div v-show="nextNum == 0" @click="switchApp">切换</div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { registerAPI } from "../../api/user.api";

export default {
  name: "register-app",
  setup(props, { emit }) {
    const switchApp = () => emit("switchApp", true);
    const avatarList = [
      { img: require("../../assets/avatar/avatar01.webp") },
      { img: require("../../assets/avatar/avatar02.webp") },
      { img: require("../../assets/avatar/avatar03.webp") },
      { img: require("../../assets/avatar/avatar04.webp") },
      { img: require("../../assets/avatar/avatar05.webp") },
      { img: require("../../assets/avatar/avatar06.webp") },
      { img: require("../../assets/avatar/avatar07.webp") },
      { img: require("../../assets/avatar/avatar08.webp") },
      { img: require("../../assets/avatar/avatar09.webp") },
    ];
    const getAvatarItem = (avatar) => (data.avatar = avatar);

    let nextNum = ref(1);
    const nextButton = (num) => (nextNum.value = num);

    const data = reactive({
      nickname: "",
      userName: "", //手机号
      password: "",
      mobilePhone: "17639895136",
      avatar: "",
      gender: "1", // 0:女,1:男
    });
    const register = async () => {
      if (
        data.nickname !== "" &&
        data.userName !== "" &&
        data.password !== "" &&
        data.avatar !== ""
      ) {
        console.log(data);
        let msg = await registerAPI(data);
        console.log(msg);
      }
    };
    return {
      data,
      nextNum,
      avatarList,
      getAvatarItem,
      switchApp,
      nextButton,
      register,
    };
  },
};
</script>

<style scoped lang="scss">
.register-app {
  font-size: $font-size-28;
  //头像列表
  .avatar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 0.1rem;

    .avatar-item {
      border: 1px solid red;
      width: 1rem;
      height: 1rem;
      border-radius: 12px;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px 0 rgba(#000, 0.1);
      margin: auto;
    }
  }

  .next {
    width: 90%;
    height: 1rem;
    background: palegreen;

    font-size: $font-size-28;
    margin: auto;
    text-align: center;
  }
  .room {
    display: flex;
    flex-direction: column;
    input {
      font-size: $font-size-30;
      margin: 0.2rem 0rem;
      flex: 1;
      padding: 0.2rem 0.2rem;
      border-radius: 0.2rem;
      border: none;
      background: rgb(255, 255, 255, 0.3);
      font-family: "Poppins", sans-serif;
      outline: none;
      color: #cc0c0c;
      input::placeholder {
        color: #cc0c0c;
        font-size: $font-size-30;
      }
    }
  }
}
</style>
